<template>
    <div>
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 登录日志</span>
            </template>
        </el-page-header>
    </div>
    <div style="">
        <el-skeleton :rows="11" :loading="loading" animated>
            <div class="grid-content bg-purple-dark" id="k1">
                <el-row gutter="40">
                    <el-col :span="12">
                        <div style="margin-left: 10px;">
                            <el-date-picker v-model="time" @change="change" type="datetimerange" :shortcuts="shortcuts"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />

                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="display: flex;float: right;">

                            <el-input v-model="input" placeholder="点击账号查询" @input="handlerChange" class="input-with-select">
                                <template #append>
                                    <el-button circle>
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </div>
                    </el-col>



                </el-row>
            </div>
            <div style="width: 100%;height: 100%;margin-top: 10px;">
                <el-table :data="tableData" row-key="id" v-loading="loadingshow" border stripe
                    style="width: 100%;height: 460px;">
                    <el-table-column prop="id" v-if="false" label="编号" width="180" />
                    <el-table-column type="index" label="序号" align="center" width="80" />
                    <el-table-column prop="account" label="账号" width="180">
                        <template #default="scope">
                            <a id="a" @click="query(scope.row)">{{ scope.row.account }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名"/>
                    <el-table-column prop="ip" label="ip" />
                    <el-table-column prop="time" label="时间"/>
                </el-table>
                <div id="k2">
                    <el-pagination v-model:current-page="currentpage" v-model:page-size="limit"
                        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </el-skeleton>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getLoginLogs } from '../../../api/log/index'
export default defineComponent({
    setup() {
        const data = reactive({
            tableData: [],//表格数据
            page: 1,//第一页
            limit: 10,//每页显示
            total: 0,//总条数
            currentpage: 1,//
            loading: true,//骨架屏
            loadingshow: false,//表格加载
            time: '',//时间
            input: '',//输入框
            search: "",//搜索的值
            begin: '',//开始时间
            end: '',//结束时间
            account: ''//账号
        })

        onMounted(() => {
            events.getdata(data.begin, data.end, data.account);
        })

        const events = {
            //数据显示
            getdata(begin: any, end: any, account: any) {
                getLoginLogs({
                    page: data.page,
                    limit: data.limit,
                    begin: begin,
                    end: end,
                    account: account
                }).then((res: any) => {
                    if (res.result == 0) {
                        console.log(res)
                        data.tableData = res.data.data
                        data.total = res.data.total
                        data.loading = false
                        data.loadingshow = false
                    }
                })

            },
            // 分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata(data.begin, data.end, data.account);
                data.loadingshow = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata(data.begin, data.end, data.account);
                data.loadingshow = true;
            },
            query(obj: any) {
                data.input = obj.account
                events.handlerChange()
            },
            //查询
            handlerChange() {
                data.loadingshow = true;
                data.account = data.input;
                events.getdata(data.begin, data.end, data.account);
                if (!data.input) {
                    data.account = "";
                    events.getdata(data.begin, data.end, data.account);
                }
            },
            //时间选择
            change(e: any) {
                data.loadingshow = true
                if (data.time != null) {
                    //开始时间
                    var Kymd = this.dateFormat(data.time[0]) //年月日
                    //结束时间
                    var Jymd = this.dateFormat(data.time[1]) //年月日
                    console.log("开始时间", Kymd)
                    console.log("结束时间", Jymd)
                    events.getdata(data.begin = Kymd, data.end = Jymd, data.account);
                } else {
                    events.getdata(data.begin = '', data.end = '', data.account);
                }
            },
            //时间转换，时间转换 Wed Sep 16 2020 00:00:00 GMT+0800 (中国标准时间)
            dateFormat(tableData: any) {
                var date = new Date(tableData)
                var y = date.getFullYear()
                var m:any = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d:any = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
        }

        return {
            ...toRefs(data),
            ...events
        }
    }
})
</script>
<style scoped>
#fy {
    text-align: center;
    margin-top: 10px;
}

#k1 {
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
}

#k2 {
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
</style>
  
  